<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<link rel="stylesheet" type="text/css" href="../css/style.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap-treeview.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jstree.min.js"></script>

		<style type="text/css">
			.menu {
				border: 1px solid #337ab7;
			}
			
			.sub-menu {
				border: none;
			}
			
			.menu li {
				cursor: pointer;
			}
			
			.menu>li {
				background: #337ab7;
				color: #FFFFFF;
			}
		</style>
		<script type="text/javascript">
			jQuery(document).ready(function() {
				function kc_catalog(cos) {<!-- 定义了一个方法，处理每次传过来的课程数据 -->
					var course = cos;<!-- 创建变量来存储传递的值-->
					$("#frame").load("create_course.html .sub-htm", "", function() {
						var str = "创建";
						if (course != null) {
							str = "编辑";
							$("#kcid").val(course.id);<!-- 存储课程的ID-->
							$("#kc-name").val(course.name);<!--存储课程的名字 -->
							$("#kc-descript").val(course.descript);<!--存储课程的描述 -->
						}
						$("#path").html("<li><a href='#'>课程管理</a></li><li class='active'>" + str + "</li>");
						$("#save-course").click(function() {<!--点击存储按钮后提交表单数据 -->
							$.ajax({<!-- ajax提交表单数据-->
								type: "post",<!--方法 -->
								url: "savecourse",<!--链接到存储课程方法-->
								data: $("#course").serialize(),<!--传的数据是表单，并且序列化 -->
								success: function(kc) {<!--传输成功后返回一个函数 kc是服务端返回的json数据 -->
									alert("成功！");
									if (course != null) return;<!--课程不为空，结束 -->
									<!--对比左边，课程为空，就创建相应的课程 -->
									$("#kcgl").append("<li kcid='" + kc.id + "' kcdp='" + kc.descript + "'>" + kc.name + "</li>");
									<!--给它加入样式 -->
									$("#kcgl").children("li").addClass("list-group-item").addClass("sub-menu");
								}
							});
						});
					});
				}

				$.get("getcourse", "", function(data) {<!-- 从getcourse方法获取课程数组，data为课程数组-->
					$.each(data, function(index, element) {<!-- 从数组中根据index取出单独的元素-->
						$("#kcgl").append("<li kcid='" + element.id + "' kcdp='" + element.descript + "'>" + element.name + "</li>");
						$("#nrfl").append("<li kcid='" + element.id + "' kcdp='" + element.descript + "'>" + element.name + "</li>");
						<!--课程管理和内容分类每一个都加上一列，同时加上kcid属性（编程者自己添加），元素的描述，显示元素名字， -->
						$("#kcgl").children("[kcid='" + element.id + "']").click(function() {
							<!--课程管理标签下每一个子分支被点击到，把对应的课程传给kc_catalo（） 方法-->
							var ele = element;
							kc_catalog(ele);
						});
						$("#nrfl").children("[kcid='" + element.id + "']").click(function() {
							<!--内容分类的每一个子标签被点击到 -->
							var cid = $(this).attr("kcid");
							<!--取出kcid属性 -->
							var cname = element.name;
							<!--取出元素的名字 -->
							$("#frame").load("contenttype.html #ctype", "", function() {
								$("#hom").text("内容分类");
								$("#cid").val(cid);
								<!-- id为cid的框赋值cid-->
								$("#lib").text(cname);
								<!-- id为lib的框赋值名字-->
								$("#tree").bind("select_node.jstree", function(event, data) {
									<!-- 选中tree的节点上的值的方法-->
									var obj = data;
									$("#id").val(obj.node.id);
									<!-- id为id的框赋值上一级课程（当前节点）的id-->
									$("#currentid").val(obj.node.id);
									$("#division").val(obj.node.text);
									<!-- id为divis赋值上一节课程（当前节点）的名字-->
									if (obj.node.parent != '#')
										$("#parentid").val(obj.node.parent);
									<!-- 若当前节点有parentid，则给id为parentid的框赋值-->
									$("#parentid1").val(obj.node.id);
									<!-- id为parentid1赋值当前节点的id-->
									var xxx = $("#id").val();
									$.post("getDescript",{catalogid:xxx},function (data) {
										$("#descript").val(data);
										<!-- 给id为descript的框赋值-->
									})
									
									
									
								});
								$("#tree").on("changed.jstree", function(e, data) {
									var selectedtext = data.instance.get_node(data.selected[0]).text;
									if (data.selected.length && $(".sele").text != selectedtext) {
										$("#path").append("<li class='sele'><a>" + selectedtext + "</a></li>");
									}
								});
								$("#tree").jstree({
									<!--生成jstree -->
									"core": {
										"data": {
											"url": "getCTree/" + cid,
											"data": function(n) {
												return {
													id: n.attr ? n.attr("id") : 0
												};
											}
										}
									},
									"plugins": ["themes", "json_data"]
								});
								$("#save_modi").click(function() {
									alert("clicked");
									$.ajax({
										type: "post",
										url: "saveCatalog",
										data: $("#form1").serialize(),
										success: function() {
											window.location.reload();
										}
									});
								});
								$("#confirm").click(function() {
									$("#cid1").val($("#cid").val());
									alert("update");
									$.ajax({
										type: "post",
										url: "saveCatalog",
										data: $("#submitupdate").serialize(),
										success: function() {
											window.location.reload();
										}
									});
								});
								

								$("#confirm1").click(function() {
									$.ajax({
										type: "post",
										url: "deleteCatalog",
										data: $("#form1").serialize(),
										success: function() {
											window.location.reload();
										}
									});
								});
							});

						});
					});
					$("#kcgl").children("li").addClass("list-group-item").addClass("sub-menu");
					$("#nrfl").children("li").addClass("list-group-item").addClass("sub-menu");
					<!-- 添加分支-->
				});

				$("#create-course").click(function() {
					kc_catalog();
					<!-- 点击之后弹出-->
				});

			});
		</script>
	</head>

	<body>
		<div class="container">
			<nav class="navbar navbar-inverse">
				<div class="navbar-header"><!--这个是导航栏 -->
					<a href="main.html" class="navbar-brand">课程管理系统</a>
				</div>
				<p class="navbar-text navbar-right" style="margin-right: 20px;">角色</p>
			</nav>
			<div class="row">
				<div class="col-md-2">
					<ul class="list-group menu">
						<li class="list-group-item" data-toggle="collapse" data-target="#kcgl" id="create-course">课程管理</li>
						<div id="kcgl" class="collapse">
						</div>
						<li class="list-group-item" data-toggle="collapse" data-target="#nrfl" id="nrgl">内容分类</li>
						<div id="nrfl" class="collapse">
						</div>
						<li class="list-group-item" data-toggle="collapse" data-target="xsgl">学生管理</li>
						<div id="xsgl" class="collapse">
						</div>
						<li class="list-group-item" data-toggle="collapse" data-target="zlgl">资料管理</li>
					</ul>
				</div>
				<div class="col-md-10">
					<ol class="breadcrumb" id="path">
						<li><a href="#" id="hom">Home</a></li>
						<li><a href="#" id="lib">Library</a></li>
						<li><a href="#" id="dat">Data</a></li>
					</ol>
					<div id="frame">

					</div>
					
				</div>
			</div>
		</div>
	</body>

</html>